<template>
  <view class="my_stepper addcart">
    <view v-show="value != 0" class="btn" @click.stop="minus">
      <image class="icon" src="/static/images/jianhao.svg" mode=""></image>
    </view>
    <view
      v-show="value != 0"
      @click.stop="showkey"
      class="input_box align_center"
    >
      <view class="num">{{ value ? value : "" }}</view>
      <!-- <input class="input_value bold" :id="index" type="number" v-model="value" disabled="true" /> -->
    </view>
    <view class="btn" style="width: 50rpx; height: 50rpx" @click.stop="plus">
      <image
        class="icon"
        v-if="value != 0"
        src="/static/images/jiahao.svg"
        mode=""
      ></image>
      <image
        class="icon"
        v-else
        src="../../static/images/gouwuche2.png"
        mode=""
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  props: ["val", "min", "limit", "index", "inventory"],
  data() {
    return {
      value: this.val,
    };
  },
  watch: {
    val(newval) {
      this.value = newval;
    },
  },
  methods: {
    minus() {
      var val = Number(this.value);
      this.$emit("minus", {
        index: this.index,
        value: val,
        min: this.min,
        inventory: this.inventory,
        limit: this.limit,
      });
    },
    plus() {
      var val = Number(this.value),
        inventory = Number(this.inventory);
      this.$emit("plus", {
        index: this.index,
        value: val,
        min: this.min,
        inventory: this.inventory,
        limit: this.limit,
      });
    },
    showkey() {
      console.log("11111111");
      this.$emit("showKey");
    },
  },
};
</script>

<style lang="scss" scoped>
.my_stepper {
  display: flex;
  align-items: center;

  .btn {
    width: 50rpx;
    height: 50rpx;
    // box-sizing: initial;
    // border-radius: 50%;
    // font-weight: bold;
    // line-height: 40rpx;
    // text-align: center;
    .icon {
      width: 100%;
      height: 100%;
    }
  }

  .input_box {
    height: 40rpx;
    // background:#fff;
    margin: 0 8rpx;

    .num {
      text-align: center;
      min-width: 80rpx;
      font-weight: bold;
    }
  }
}

// .my_stepper .input_value {
// 	width: 80rpx;
// 	height: initial;
// 	text-align: center;
// }

// @media(min-width:800px) {

// 	.minus,
// 	.plus {
// 		width: 40px !important;
// 		height: 40px !important;
// 	}

// 	.minus {
// 		line-height: 36px !important;
// 	}

// 	.plus {
// 		line-height: 38px !important;
// 	}

// }
</style>
